<template>
  <div>
    
    <el-card>
      <div slot="header">
        <div class="out">
          
          <el-page-header @back="goBack">
            <template slot="content">
              <div class="header">
                <span>优惠券管理</span>
                <div>
                  <el-input
                    style="margin-right: 0.5rem"
                    v-model="search_content"
                    placeholder="编号或者发放方"
                  ></el-input>
                  <el-button type="primary" @click="add">添加</el-button>
                </div>
              </div>
            </template>
          </el-page-header>
        </div>
      </div>
      <div>
        <el-table
          @cell-mouse-enter="cellComing"
          :data="final_db_coupon"
          style="width: 100%"
        >
          <el-table-column prop="id" label="编号" width="width" align="center">
          </el-table-column>
          <el-table-column
            prop="issuer"
            label="发放方"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            width="90"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="startDate"
            label="使用日期"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="endDate"
            label="终止日期"
            width="140"
            align="center"
          >
          </el-table-column>
            <el-table-column
            prop="price"
            label="售价"
            width="width"
            align="center"
          >
          </el-table-column>
            <el-table-column
            prop="threshold"
            label="门槛"
            width="width"
            align="center"
          >
          </el-table-column>
           <el-table-column
            prop="discount"
            label="折扣"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column header-align="center" align="center" width="149">
            <template slot-scope="scope">
<!--                <el-button type="primary" size="small">修改</el-button>-->
                <el-button type="info" @click="delItem(scope.row)" size="small">删除</el-button>
            
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import m_dayjs from "../assets/m_day";
export default {
  computed: {
    ...mapState(["db_coupon"]),
    final_db_coupon() {
      return this.db_coupon;
    },
  },
  methods: {
    delItem(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //网络请求
          //如果返回码是200
          this.$store.commit("delete_coupon", row.id);
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    add() {
      this.$router.push("coupon-add");
    },
    cellComing(row) {
      this.currentItem = row;
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  data() {
    return {
      currentItem: null,
      search_content: "",
      tableData: [],
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.out >>> .el-page-header__content {
  width: 90%;
}
.out >>> .el-page-header__left {
  align-items: center;
}
.out .el-input {
  width: 300px;
}
</style>